<template>
  <div class="wrapper">
    <div class="row">
      <div class="col-md-6">
        <section class="panel">
          <header class="panel-heading">
            文章标签
                            <span class="tools pull-right">
                                <a class="fa fa-chevron-down" href="javascript:;"></a>
                                <a class="fa fa-times" href="javascript:;"></a>
                            </span>
          </header>
          <div class="panel-body" style="display: block;">
            <div class="tag">
                <span class="badge">5</span>
                <span class="badge badge-primary">10</span>
                <span class="badge badge-success">15</span>
                <span class="badge badge-info">20</span>
                <span class="badge badge-inverse">25</span>
                <span class="badge badge-warning">30</span>
                <span class="badge badge-important">35</span>
            </div>
          </div>
        </section>
      </div>
      <div class="col-md-6">
        <section class="panel">
          <header class="panel-heading">
            文章分类
                            <span class="add pull-right">
                                <a class="fa fa-plus" href="#myModal" data-toggle="modal"></a>
                            </span>
          </header>
          <div class="panel-body" style="display: block;">
            <div class="tag">
              <el-tag
                v-for="tag in category"
                :closable="true"
                :close-transition="false"
                @close="handleClose(tag)">
                {{tag.name}}
              </el-tag>
             </div>
          </div>
          <!--:type="tag.type"-->
        </section>
      </div>
    </div>
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
            <h4 class="modal-title">Modal Tittle</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label class="">分类名称:  </label>
              <input v-model="categoryVal" type="text" class="form-control">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" v-on:click="addCategory()" class="btn btn-success">添加</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="">
  .tag span{
   margin-left:5px;
    margin-bottom:5px;
  }
  .add a:hover{
    background: #65cea7;
    color: #fff;
  }
  .add a{
    cursor:pointer;
    background: #E3E4E8;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #858582;
    float: left;
    margin-left: 3px;
    padding: 10px;
    text-decoration: none;
  }
</style>
<script>
  export default {
    data() {
      return {
        category: [],
        categoryVal: '',
        tags: [
          {name: '标签一' },
          {  name: '标签二'},
          { name: '标签三' },
          { name: '标签四'},
          {  name: '标签五'},
          {  name: '标签六'}
        ]

      };
    },
    mounted(){
      this.getCategory()
      this.load.loading(true);
    },
    updated(){
      this.load.loading(false);
    },
    methods: {
      open(msg,type) {
        this.$message({
          message: msg,
          type: type
        });
      },
      handleClose(tag) {
        console.log(tag)
        var _self=this;
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function(){
          _self.$http.post('/admin/article/category/del',{id:tag.id}).then(function(response){
              if(response.data.status){
                _self.open(response.data.data,'success');
                _self.getCategory();
              }else{
                _self.open(response.data.data,'warning');
                _self.getCategory();
              }

            },function(response){
               _self.open('添加失败','warning');
            });
        }).catch(function(  ){

        });
      },
      addCategory(){
        if(this.categoryVal==''){
          this.open('不能为空','warning');
          return
        }
        this.$http.post('/admin/article/category/add',{val:this.categoryVal}).then(function(response){
          if(response.data.status){
            this.open(response.data.data,'success');
             this.getCategory();
          }else{
            this.open(response.data.data,'warning');
          }
        },function(response){
          this.open('添加失败','warning');
        }).bind(this);
      },
      getCategory(){
        this.$http.post('/admin/article/category/gets').then(function(response){
          if(response.data.status){
            this.category=response.data.data;
          }
        },function(response){
          this.open('网络错误','warning')
        }).bind(this);
      }
    }
  }
</script>